<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="请输入账号" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="请输入密码" prop="password">
      <el-input v-model="ruleForm.password" />
    </el-form-item>
    <el-button @click="resetForm()">登录</el-button>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import router from "@/router/index";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import { login } from "@/api/api";
interface RuleForm {
  username: string;
  password: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "Hello",
  username: "",
  password: "",
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});

const resetForm = async () => {
  let d = await login(ruleForm);
  if (d.data.flag) {
    window.sessionStorage.setItem("token", d.data.data.token);
    window.sessionStorage.setItem("username", d.data.data.username);
    window.sessionStorage.setItem("password", d.data.data.password);
    alert("登录成功");
    router.push("/list");
  }
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>
